<template>
    <div> 
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="addPatient">添加患者</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="primary" plain>查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">   <!-- 表格与网页同宽 -->
            <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="idCard"
                label="身份证号"
                align="center"
                width="220"
                class="box">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别"
                align="center"
                width="80"
                class="box">
            </el-table-column>
            <el-table-column
                prop="address"
                label="住址"
                width="300">
            </el-table-column>
            <el-table-column
                prefix-icon="el-icon-time"
                prop="date"
                label="住院日期"
                width="150">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="from"
                label="感染来源"
                width="170">
            </el-table-column>
            <el-table-column
                prop="operate"
                label="操作"
                align="center"
                width="300">
                <template>
                    <el-button plain size="mini" @click="showById">编辑</el-button>
                    <el-button type="primary" plain size="mini" @click="showCheck">检测记录</el-button>
                    <el-button type="primary" plain size="mini" @click="showCureDialog">治愈</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
        <el-dialog title="治愈" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="治愈时间"><br>
                    <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input type="textarea" v-model="form.desc" rows="4"></el-input>  
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import request from '@/utils/request'

export default {
  data() {
    return {
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        input: '',
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogFormVisible: false,
            form: {
                date: '',
                desc: ''
                },
            formLabelWidth: '80px'
        }   
    },
    created(){
        this.fetchData()
    },
    methods:{
        fetchData(){
            request({
                url: '../patient_list.json',
                method: 'get',   //发请求
            }).then(response => {
                this.tableData = response.data
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        showById(){
            this.$router.push("/patient/change")
        },
        showCheck(){
            this.$router.push("/patient/checkList")
        },
        showCureDialog(){
            this.dialogFormVisible = true
        },
        addPatient(){
            this.$router.push("/patient/add")
        }
    },
}
</script>

